<form id="spec-form" autocomplete="off" action="/shop/spec/ajax_add" class="layui-form layui-box ng-pristine ng-scope ng-invalid ng-invalid-required" style="padding:25px 30px 20px 0" method="post" id="spec-form" novalidate="novalidate">
    <input id="specOptions" name="specOptions" type="hidden">
    <div class="layui-form-item">
        <label class="layui-form-label label-required">规格名称</label>
        <div class="layui-input-block">
            <input id="name" name="name"  required title="请输入规格名称" placeholder="请输入规格名称" class="layui-input ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
            <span style="display: inline-block;">&nbsp;</span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label label-required">排序值</label>
        <div class="layui-input-block">
            <input id="sort" digits=true name="sort"  required title="请输入排序值" placeholder="请输入排序值" class="layui-input ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
            <span style="display: inline-block;">&nbsp;</span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label label-required">规格参数</label>
        <div class="layui-input-block">
            <textarea class="hide ng-pristine ng-untouched ng-valid ng-empty" ng-model="spec_param"></textarea>
            <div class="param-table-list">
                <table class="layui-table margin-none">
                    <tbody class="param-table-list">
                     <tr ng-repeat="x in paramList" class="transition ng-scope">
                        <td class="param-input-td one nowrap">
                            <input name="group{{$index + 1}}" ng-change="setGroup($index,this)"   placeholder="分组" title="请输入属性分组" ng-model="x.name" class="group-name required layui-input ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
                            <span style="display: inline-block;">&nbsp;</span>
                        </td>
                        <td class="param-input-td two nowrap">
                            <input  name="option{{$index + 1}}"  placeholder="名称" title="请输入属性名称" ng-model="x.value" class="option required layui-input ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
                            <span style="display: inline-block;">&nbsp;</span>
                        </td>
                        <td class="param-input-td thr nowrap">
                            <a  class="color-desc ng-scope" ng-click="delParam($index)">删除</a>
                            <a  class="color-desc ng-scope" ng-click="moveToUp($index)">上移</a>
                            <a  class="color-desc ng-scope" ng-click="moveToDn($index)">下移</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <table class="layui-table">
                <tbody><tr>
                    <td class="text-center notselect padding-none border-none">
                        <button type="button" class="layui-btn full-width layui-btn-primary" ng-click="addParam()">添加属性</button>
                    </td>
                </tr>
                </tbody></table>
            <p class="help-block">设置多个内容值时请使用空格键或英文逗号隔开。</p>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">规格描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入规格描述" title="请输入规格描述" class="layui-textarea ng-pristine ng-valid ng-empty ng-touched" ng-model="spec_desc" name="spec_desc"></textarea><span style="animation-duration: 0.2s; padding-right: 20px; color: rgb(169, 68, 66); position: absolute; right: 0px; font-size: 12px; z-index: 2; display: block; width: 30px; text-align: center; pointer-events: none; top: 0px; padding-bottom: 6px; line-height: 100px;"></span>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="layui-form-item text-center">
        <button class="layui-btn" type="submit">保存数据</button>
        <button class="layui-btn layui-btn-danger" type="button" data-confirm="确定要取消编辑吗？" data-close="">取消编辑</button>
    </div>

    <script>
        require(['angular'], function () {
            // 应用创建与初始化
            var app = angular.module("SpecForm", []).run(callback);
            angular.bootstrap(document.getElementById('spec-form'), [app.name]);

            //
            function callback($rootScope) {
                // 属性参数
                $rootScope.paramList = filterParamList(JSON.parse('[]') || []);
                // 删除菜单
                $rootScope.delParam = function (x) {
                    var dialogIndex = $.msg.confirm('确定移除参数吗？', function () {
                        $rootScope.$apply(function () {
                            var tmp = [];
                            for (var i in $rootScope.paramList) {
                                (parseInt(i) !== parseInt(x)) && tmp.push($rootScope.paramList[i]);
                            }
                            $rootScope.paramList = filterParamList(tmp);
                            $.msg.close(dialogIndex);
                        });
                    });
                };

                // 添加参数
                $rootScope.addParam = function () {
                    $rootScope.paramList.push({name: '', value: ''});
                    setTimeout(function () {
                        $('.param-table-list').scrollTop('10000')
                    }, 10);
                    $("#spec-form").validate();
                };

                // 属性参数下移
                $rootScope.moveToDn = function (index) {
                    var tmp = [], cur = $rootScope.paramList[index];
                    if (index > $rootScope.paramList.length - 2) {
                        return false;
                    }
                    for (var i in $rootScope.paramList) {
                        (parseInt(i) !== parseInt(index)) && tmp.push($rootScope.paramList[i]);
                        (parseInt(i) === parseInt(index) + 1) && tmp.push(cur);
                    }
                    $rootScope.paramList = tmp;
                };

                // 属性参数上移
                $rootScope.moveToUp = function (index) {
                    var tmp = [], cur = $rootScope.paramList[index];
                    if (index < 1) {
                        return false;
                    }
                    for (var i in $rootScope.paramList) {
                        (parseInt(i) === parseInt(index) - 1) && tmp.push(cur);
                        (parseInt(i) !== parseInt(index)) && tmp.push($rootScope.paramList[i]);
                    }
                    $rootScope.paramList = tmp;
                };
            }
            // 过滤规格参数列表
            function filterParamList(list) {
                return list.length < 1 ? [{name: '', value: ''}] : list;
            }
            $("#spec-form").validate();
            $("#spec-form").submit(function () {
                var data={};
                var specOptions=[];
                $(".group-name").each(function (index,element) {
                    var obj={};
                    obj.name=$(element).val();
                    specOptions.push(obj);
                });
                $(".option").each(function (index,element) {
                    specOptions[index].value=$(element).val();
                });
                data.name=$("#name").val();
                data.specOptions=specOptions;
                if ($(this).valid()) {
                    $.ajax({
                        type : "POST",
                        url : $(this).attr("action"),
                        data :JSON.stringify(data),
                        dataType : "json",
                        contentType:"application/json",
                        success : function(res) {
                            if(res.errorCode=="0")
                            {
                                $.msg.success(res.msg);
                            }
                            else
                            {
                                $.msg.error(res.msg);
                            }
                        }
                    });
                }
                return false;
            });
        });
    </script>

    <style>
        .param-table-list {
            overflow: auto;
            max-height: 200px;
            position: relative;
            overflow-y: scroll;
        }

        .param-input-td {
            position: relative;
            padding: 0 !important;
        }

        .param-input-td.one {
            width: 30%;
        }

        .param-input-td.thr {
            width: 20%;
            text-align: center;
        }

        .param-input-td.one:before {
            content: '分组'
        }
        .param-input-td.two:before {
            content: '规格'
        }
        .param-input-td:before {
            margin: 4px;
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            background: #e2e2e2;
        }
        .param-input-td input {
            padding-left: 50px;
            border: none !important;
        }
    </style>
</form>